<template>
  <div>
    <BaseForm
      ref="searchForm"
      type="search"
      :items="formItems"
      labelWidth="100px"
      v-model:form="searchParams"
      @search="handleSearch"
    >
    </BaseForm>

    <BaseTable
      ref="baseTable"
      :getTableDataFn="basicConfigService.pageListWxGroupResDto"
      :searchParams="searchParams"
      :serial="true"
      :select="true"
      :handleDisable="handleDisable"
      :handleKeyWord="handleKeyWord"
      :isWxGroup="true"
    >
      <template #select>
        <el-table-column type="selection" width="55" />
      </template>
      <el-table-column prop="wxGroupName" label="微信群名称" minWidth="120" />
      <el-table-column prop="robotDtoList" label="关联机器人" minWidth="120">
        <template #default="scope">
          <span v-for="(item, i) in scope.row.robotDtoList" :key="i">
            <span> {{ item.managerName }}</span>
            <span v-if="i + 1 < scope.row.robotDtoList?.length"> 、</span>
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="managerDtoList" label="关联网格经理" minWidth="120">
        <template #default="scope">
          <Tooltip :text="scope.row.managerDtoList?.map((e) => e.managerName)?.join('、')"></Tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="communityDtoList" label="关联片区/村社" minWidth="160">
        <template #default="scope">
          <Tooltip :text="scope.row.communityDtoList?.map((e) => e.communityName)?.join('、')"></Tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="communityDtoList" label="关联管理员" minWidth="160">
        <template #default="scope">
          <Tooltip
            :text="
              scope.row.staffManagerDtoList
                ?.map((e) => e.managerName)
                ?.join('、')
                .trimEnd('、')
            "
          ></Tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="relationWxUserNum" label="群成员数量" width="100">
        <template #default="scope">
          <!-- v-if="scope.row.relationWxUserNum > 0" -->
          <el-link
            v-if="scope.row.relationWxUserNum > 0"
            :underline="false"
            link
            type="primary"
            size="small"
            @click.prevent="showPersonDetail(scope.row)"
            >{{ scope.row.relationWxUserNum }}</el-link
          >
          <span v-else>{{ scope.row.relationWxUserNum }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="备注">
        <template #default="scope">
          <Tooltip :text="scope.row.remark"></Tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="updateTime" label="最后修改时间" minWidth="130">
        <template #header>
          <span>最后修改时间</span>
          <SortTable :sortTablekey="sortTablekey" @click="sortTablekey = 1" :handleSearch="handleSearch"></SortTable>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="" label="高级舆情预警提醒" minWidth="60">
        <template #default="scope">
          <el-switch v-model="scope.row.notice" class="ml-2" inline-prompt
            active-text="开启"
            inactive-text="关闭" />
        </template>
      </el-table-column> -->
      <el-table-column prop="isDisable" label="状态" minWidth="60">
        <template #default="scope">
          <div
            :style="{
              color: scope.row.isDisable == 0 ? '#70b603fe' : '#d9001bfe',
            }"
          >
            {{ scope.row.isDisable == 0 ? '在服务' : '未服务' }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="keyWordState" label="自动回复状态" minWidth="80">
        <template #default="scope">
          <div
            :style="{
              color: scope.row.keyWordState == 1 ? '#70b603fe' : '#d9001bfe',
            }"
          >
            {{ scope.row.keyWordState == 1 ? '已开启' : '已关闭' }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="200">
        <template #default="scope">
          <el-link :underline="false" link type="primary" size="small" @click.prevent="handleEdit(scope.row)"
            >编辑</el-link
          >
          <el-link :underline="false" link type="primary" size="small" @click.prevent="handleDisable(scope.row)">{{
            scope.row.isDisable == 1 ? '启动服务' : '停止服务'
          }}</el-link>
          <el-link :underline="false" link type="primary" size="small" @click.prevent="handleKeyWord(scope.row)">{{
            scope.row.keyWordState == 0 ? '开启自动回复' : '关闭自动回复'
          }}</el-link>
        </template>
      </el-table-column>
    </BaseTable>
    <EditForm
      v-if="visibleEditForm"
      v-model:dialogVisible="visibleEditForm"
      :item="item"
      :handleSearch="handleSearch"
      :options="options"
    ></EditForm>
  </div>
</template>

<script setup lang="ts">
import EditForm from './EditForm.vue';
import openMsgBox from '@/hooks/messageBox.js';
import { basicConfigService } from '@/api/basicConfig';
const options = ref([]);
const robotList = ref([]); //机器人列表
const adminList = ref([]); //管理员列表
const formItems = ref([
  {
    name: '微信群名称',
    key: 'wxGroupName',
    type: 'input',
  },
  {
    name: '关联机器人',
    key: 'robotManagerId',
    type: 'select',
    options: robotList,
  },
  {
    name: '关联网格经理',
    key: 'managerId',
    type: 'select',
    options: options,
  },
  {
    name: '关联管理员',
    key: 'staffManagerId',
    type: 'select',
    options: adminList,
  },
  {
    name: '状态',
    key: 'isDisable',
    type: 'select',
    options: [
      { label: '在服务', value: 0 },
      { label: '未服务', value: 1 },
    ],
  },
  {
    name: '自动回复状态',
    key: 'keyWordState',
    type: 'select',
    options: [
      { label: '已开启', value: 1 },
      { label: '已关闭', value: 0 },
    ],
  },
  /*  {
    name: '高级舆情预警提醒',
    key: 'notice',
    type: 'select',
    options: [
      { label: '开启', value: 1 },
      { label: '关闭', value: 0 },
    ],
  }, */
]);
const router = useRouter();
const showPersonDetail = (row) => {
  window.localStorage.setItem('weChatGroup', JSON.stringify(row));
  router.push({ path: '/basicConfig/basicInfo/weChartMember', query: { bizId: row.wxGroupCode, type: 2 } });
};
const getAllManager = () => {
  basicConfigService.getAllManager({ data: {} }).then((res) => {
    let data = res.data.map((e) => {
      return {
        value: e.managerId,
        label: e.managerName,
      };
    });
    options.value.push(...data);
  });
};

// 获取所有机器人列表
const getAllRobot = () => {
  basicConfigService.getAllRobot({ data: {} }).then((res) => {
    let data = res.data.map((e) => {
      return {
        value: e.managerId,
        label: e.managerName,
      };
    });
    robotList.value.push(...data);
  });
};
// 获取所有管理员

const getAllAdmin = () => {
  basicConfigService.getAllAdmin({ data: {} }).then((res) => {
    let data = res.data.map((e) => {
      return {
        value: e.managerId,
        label: e.managerName,
      };
    });
    adminList.value.push(...data);
  });
};

const searchParams = ref({
  wxGroupName: '',
  managerId: '',
  isDisable: '',
  keyWordState: '',
});
const baseTable = ref(null);
const sortTablekey = ref(1);
const handleSearch = (data = { sort: undefined }, e = '') => {
  if (e != 'sort') sortTablekey.value = 0;
  baseTable.value.handleSearch({
    ...searchParams.value,
    updateTimeOrder: data?.sort,
  });
};
const item = ref({});
const visibleEditForm = ref(false);
const handleEdit = (row) => {
  item.value = JSON.parse(JSON.stringify(row));
  visibleEditForm.value = true;
};
const handleDisable = (row, rows = []) => {
  let isDisable = row.isDisable || row;
  let ids = row.groupId ? [row.groupId] : rows.map((e) => e.groupId);
  openMsgBox(
    {
      tips:
        isDisable == 1
          ? '启动服务后，该微信群将纳入系统服务范围。是否确定?'
          : '停止服务后，该微信群的机器人将不执行任何指令。是否确定?',
    },
    () => {
      if (isDisable == 1) {
        return basicConfigService.groupEnableBatch({
          data: ids,
        });
      } else {
        return basicConfigService.groupDisableBatch({
          data: ids,
        });
      }
    },
    () => {
      handleSearch();
    },
  );
};
const handleKeyWord = (row, rows = []) => {
  let keyWordState = row.keyWordState == undefined ? row : row.keyWordState;
  let ids = row.groupId ? [row.groupId] : rows.map((e) => e.groupId);
  openMsgBox(
    {
      tips:
        keyWordState == 0
          ? '开启自动回复后，在该微信群触发关键词时，机器人将自动回复。是否确定？'
          : '关闭自动回复后，在该微信群触发关键词时，机器人将不会自动回复。是否确定？',
    },
    () => {
      if (keyWordState == 0) {
        return basicConfigService.keyWordEnableBatch({
          data: ids,
        });
      } else {
        return basicConfigService.keyWordDisableBatch({
          data: ids,
        });
      }
    },
    () => {
      handleSearch();
    },
  );
};
onMounted(() => {
  getAllManager();
  getAllRobot();
  getAllAdmin();
});
</script>

<style lang="less" scoped></style>
